<template>
    <section>
        <el-table :data="items" stripe style="width: 100%" tooltip-effect="dark" :default-sort = "{prop: 'gmt_modified', order: 'descending'}">
            <el-table-column type="index" label="序号" width="150"> </el-table-column>
            <el-table-column prop="state" label="操作类型" :formatter="stateFormatter"> </el-table-column>
            <el-table-column prop="operator_name" label="操作人姓名"> </el-table-column>
            <el-table-column sortable prop="gmt_modified" label="操作时间"> </el-table-column>
            <el-table-column prop="remark" label="备注" show-overflow-tooltip> </el-table-column>
        </el-table>

    </section>
</template>
<script>
    import dict from '../../common/js/dict';
    export default {
        props: ["contract_logs"],
        data() {
            return {
                contract_id: '',
                items:[],
                dict: dict
            }
        },
        created () {
            // 组件创建完后获取数据，
            // 此时 data 已经被 observed 了
            this.fetchData()
        },
        methods: {
            fetchData(){
                this.contract_id = this.$route.params.id;
            },
            stateFormatter(row, column) {
                return dict.contract_log_state[row[column.property]];
            }
        },
        watch: {
            // 监测路由变化,只要变化了就调用获取路由参数方法将数据存储本组件即可
            '$router': 'fetchData',

            contract_logs(val, oldVal){//普通的watch监听
                this.items = val;
            },
        },
        mounted() {}
    }
</script>
<style lang="scss" scoped>


    .row-bg {
        text-align: right;
        padding: 10px 0;
        background-color: #f9fafc;
    }

</style>
